<body>
  <audio src = "/songs/happy_birthday.mp3" autoplay loop></audio>
<div class="page1" style = "height: 100%;"></div>
<div class="page2" style = "height: 0;"></div>
<div class="page1_button"></div>
<div class="page1_button" style = "display: none" ></div>
</body>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script>
  var page1 = document.querySelectorAll('.page1')[0];
  var page2 = document.querySelectorAll('.page2')[0];
  var max_height = document.querySelectorAll('body')[0].clientHeight;
  var page1_button = document.querySelectorAll('.page1_button')[0]
  var page2_button = document.querySelectorAll('.page2_button')[0]
  var time_out = 1;
  var len1 = max_height;
  var len2 = 0
  function to_page2() {
      max_height = document.querySelectorAll('body')[0].clientHeight;
      fade_one(1);
  }

  function to_page1() {
      max_height = document.querySelectorAll('body')[0].clientHeight;
      fade_one(2);
  }

  function fade_one(id) {
      var offset = 0;
      if (id == 1){
          offset = (max_height - len1) * 2 / max_height + 1;
          offset = Math.round(offset);
          console.log(len1,len2,offset);
          if (len1 <= 2){
              len1 = 0;
              len2 = max_height;
              page1.style.height = len1.toString() + 'px';
              page2.style.height = len2.toString() + 'px';
              return false
          }
          len1 -= offset;
          len2 += offset;
          page1.style.height = len1.toString() + 'px';
          page2.style.height = len2.toString() + 'px';
          setTimeout("fade_one(" + id.toString() + ")", time_out)
      }else {
          offset = (max_height - len2) * 2 / max_height + 1;
          offset = Math.round(offset);
          console.log(len1,len2,offset);
          if (len2 <= 2){
              len2 = 0;
              len1 = max_height;
              page1.style.height = len1.toString() + 'px';
              page2.style.height = len2.toString() + 'px';
              return false
          }
          len1 += offset;
          len2 -= offset;
          page1.style.height = len1.toString() + 'px';
          page2.style.height = len2.toString() + 'px';
          setTimeout("fade_one(" + id.toString() + ")", time_out)
      }
  }

  function show_page_buttion(id) {
      if (id == 1){
          page1_button.style.display = 'block'
          page2_button.style.display = 'none'
      }else{
          page2_button.style.display = 'block'
          page1_button.style.display = 'none'
      }
  }
</script>